<template>
  <div>
    <Poptip trigger="click">
      <Button ize="small">选择更多</Button>
      <div slot="content">
        <checkbox @on-change="checkAll">全选</checkbox>
        <div v-for="(pro, idx) in pNames" :key="idx">
          <checkbox @on-change="checkParams(pro)" :key="idx" :name="pro.name">{{
            pro.name
          }}</checkbox>
        </div>
      </div>
    </Poptip>
    <div>
      <Button @click="shiyam">实验provide</Button>
      <Button @click="qiehuan">qiehuan</Button>
    </div>
    <Card>
      <Provide></Provide>
    </Card>

    <div class="transform">
      <Button @click="showAllChart">allChart</Button>
      <Button @click="showAllTable">allTable</Button>
    </div>
    <div
      class="first"
      v-for="(product, index) in chartList"
      :key="product.name"
    >
      <div class="transform">
        <Button @click="showChart(product.name)">chart</Button>
        <Button @click="showTable(product.name)">table</Button>
      </div>
      <div class="title">{{ product.name }}</div>
      <div class="content" v-for="(chart, inx) in product.chartList" :key="inx">
        <div
          :class="inx / 2 === 0 ? 'chart' : 'table'"
          v-show="
            inx / 2 === 0 ? hide[product.name].chart : hide[product.name].table
          "
        >
          你好
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import indexVue from '../../../layouts/basic-layout/header-logo/index.vue';
    import Provide from './provide.vue';
    export default {
        name: 'IviewAdminProRowspan',

        data () {
            return {
                chartList: [
                    {
                        name: '00001',
                        chartList: [
                            {
                                chart: 'chart1'
                            },
                            {
                                table: 'chart2'
                            }
                        ]
                    },
                    {
                        name: '00002',
                        chartList: [
                            {
                                chart: 'chart1'
                            },
                            {
                                table: 'chart2'
                            }
                        ]
                    },
                    {
                        name: '00003',
                        chartList: [
                            {
                                chart: 'chart1'
                            },
                            {
                                table: 'chart2'
                            }
                        ]
                    }
                ],
                allList: [
                    {
                        name: '00001',
                        chartList: [
                            {
                                chart: 'chart1'
                            },
                            {
                                table: 'chart2'
                            }
                        ]
                    },
                    {
                        name: '00002',
                        chartList: [
                            {
                                chart: 'chart1'
                            },
                            {
                                table: 'chart2'
                            }
                        ]
                    },
                    {
                        name: '00003',
                        chartList: [
                            {
                                chart: 'chart1'
                            },
                            {
                                table: 'chart2'
                            }
                        ]
                    }
                ],
                pNames: [],
                hide: [],
                hident: {
                    hide: 'momo'
                }
            };
        },
        components: {
            Provide
        },
        provide () {
            return {
                hid: () => this.hident
            };
        },

        mounted () {},
        created () {
            this.createParams(this.allList);
            this.hideChartTable();
            console.log(this.hide);
        },

        methods: {
            qiehuan () {
                this.hident.hide = 'mama';
            },
            shiyam () {
                console.log('provide');

                console.log(this.hid);
            },
            createParams (allList) {
                let i,
                    names = [],
                    select = [];
                for (i in allList) {
                    console.log(i);
                    names.push({
                        name: allList[i].name,
                        checked: i == 0
                    });
                    if (i == 0) {
                        select.push(allList[i].name);
                    }
                }
                this.pNames = names;
                console.log();
            },
            hideChartTable () {
                let i,
                    obj = {},
                    array = [];
                array = this.pNames.map(item => {
                    return item.name;
                });
                array.forEach(item => {
                    obj[item] = {
                        chart: true,
                        table: true
                    };
                });

                this.hide = obj;
            },
            showChart (data) {
                this.hide[data].chart = true;
                this.hide[data].table = false;
            },
            showTable (data) {
                this.hide[data].chart = false;
                this.hide[data].table = true;
            },
            showAllChart () {
                let arr = Object.keys(this.hide);
                console.log(arr);
                arr.forEach(item => {
                    this.hide[item].chart = true;
                    this.hide[item].table = false;
                });
            },
            showAllTable () {
                let arr = Object.keys(this.hide);
                console.log(arr);
                arr.forEach(item => {
                    this.hide[item].chart = false;
                    this.hide[item].table = true;
                });
            },
            checkAll () {},
            checkParams (pro) {}
        }
    };
</script>

<style lang="less">
.table {
  width: 100%;
  height: 200px;
  background: red;
}
.chart {
  width: 100%;
  height: 200px;
  background: green;
}
.title {
  width: 100%;
  height: 50px;
  color: white;
  font-style: 3px;
  text-align: center;
  font-weight: 700;
  background: #333;
}
</style>
